@using VocaDb.Web.Helpers
@inherits VocaDb.Web.Code.HelperPage

@helper ArtistFilters(bool artistParticipationStatus) {

	<!-- Viewmodel: ArtistFilters -->

	<!-- ko foreach: artists -->
		<div class="control-group">
			<div style="display: inline-block;" class="input-append input-prepend">
				<a href="#" class="btn btn-nomargin" data-bind="attr: { href: '/Ar/' + id }">
					<i class="icon icon-info-sign"></i>
				</a>
				<div class="input-append">
					<input type="text" class="input-large" readonly data-bind="value: name" />
					<button type="button" class="btn btn-danger" data-bind="click: function() { $parent.artists.remove($data); }">Clear</button>
				</div>
			</div>
			@if (artistParticipationStatus) {
				<!-- ko if: $parent.hasSingleArtist -->
				@SongHelpers.ArtistParticipationStatusOptionsKnockout("$parent.artistParticipationStatus")
				<!-- /ko -->
			}
		</div>
	<!-- /ko -->

	<div class="control-group" data-bind="visible: showChildVoicebanks">
		<label class="checkbox">
			<input type="checkbox" data-bind="checked: childVoicebanks" />
			@ViewRes.Search.IndexStrings.IncludeDerivedVoicebanks
		</label>
	</div>

	<div class="control-group" data-bind="visible: showMembers">
		<label class="checkbox">
			<input type="checkbox" data-bind="checked: includeMembers" />
			@ViewRes.Search.IndexStrings.IncludeGroupMembers
		</label>
	</div>

	<div>
		<input type="text" class="input-large" data-bind="artistAutoComplete: artistSearchParams" placeholder="@ViewRes.SharedStrings.Search" />
	</div>

}

@helper ArtistLockingAutoComplete(string binding, string artistTypes, int ignoreId = 0) {
	@LockingAutoComplete("artistAutoComplete", "{ acceptSelection: " + binding + ".id, extraQueryParams: { artistTypes: '" + artistTypes + "' }, ignoreId: " + ignoreId + " }", textBinding: binding + ".name", valBinding: binding + ".id")
}

@helper CheckBoxButtons(Dictionary<string, string> options, string binding) {
	<div style="display: inline-block;">
		@foreach (var option in options) {
			<button class="btn" data-bind="click: function() { @(binding)('@option.Key'); }, enable: @(binding)() != '@option.Key'">@option.Value</button>
		}
	</div>
}

@helper DraftIcon(string statusBinding) {
	<img data-bind="visible: @statusBinding == 'Draft'" src="@Url.Content("~/Content/draft.png")" title="@HelperRes.HelperStrings.DraftIconTitle" alt="draft" />
}

@helper Dropdown(Dictionary<string, string> items, string valueBinding, string currentTextBinding) {
	<div class="btn-group">
		<button class="btn dropdown-toggle" data-toggle="dropdown">
			<span data-bind="text: @currentTextBinding"></span>
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			@foreach (var item in items) {
				<li><a data-bind="click: function() { @(valueBinding)('@item.Key'); }" href="#">@item.Value</a></li>
			}
		</ul>
	</div>
}

@helper DropdownList(Dictionary<string, string> items, string valueBinding, string cssClass = null, bool required = false) {
	<select data-bind="value: @valueBinding" class="@cssClass" @Html.ConditionalAttribute(required, "required", string.Empty)>
		@foreach (var item in items) {
			<option value="@item.Key">@item.Value</option>
		}
	</select>
}

@helper EntryCount() {
	<a class="dropdown-toggle" data-toggle="dropdown" href="#">
		@Html.Raw(string.Format(ViewRes.Search.IndexStrings.ShowingItemsOf, "<span data-bind='text: pageSize'></span>", "<span data-bind='text: totalItems'></span>"))
	</a>
	<ul class="dropdown-menu">
		<li><a data-bind="click: function() { pageSize(10); }" href="#">@string.Format(ViewRes.Search.IndexStrings.ItemsPerPage, 10)</a></li>
		<li><a data-bind="click: function() { pageSize(20); }" href="#">@string.Format(ViewRes.Search.IndexStrings.ItemsPerPage, 20)</a></li>
		<li><a data-bind="click: function() { pageSize(40); }" href="#">@string.Format(ViewRes.Search.IndexStrings.ItemsPerPage, 40)</a></li>
		<li><a data-bind="click: function() { pageSize(100); }" href="#">@string.Format(ViewRes.Search.IndexStrings.ItemsPerPage, 100)</a></li>
	</ul>
}

@helper EntryValidationMessage(bool draft, Dictionary<string, string> validationMessages, string helpSection) {

	if (draft) {
		<div class="alert alert-success alert-no-bottom-margin" data-bind="visible: !hasValidationErrors()" style="display: none;">
			<span class="icon-line tickIcon"></span>
			@HelperRes.HelperStrings.EntryValidationNoErrorsDraft
		</div>
	} else {
		<div class="alert alert-success alert-no-bottom-margin" data-bind="visible: !hasValidationErrors()" style="display: none;">
			<span class="icon-line tickIcon"></span>
			@HelperRes.HelperStrings.EntryValidationNoErrors
		</div>
	}

	<div class="alert alert-no-bottom-margin" data-bind="visible: hasValidationErrors()" style="display: none;">
		<div class="pull-right">
			<a data-bind="click: function() { validationExpanded(!validationExpanded()); }, css: { active: validationExpanded }" class="btn btn-mini" href="#">
				<i class="icon-plus noMargin"></i>
				@HelperRes.HelperStrings.EntryValidationWarningDetails
			</a>
		</div>

		<!-- ko if: !validationExpanded() -->
		<div class="entry-validation-error-summary">
			<span class="icon-line errorIcon"></span>
			<strong>@HelperRes.HelperStrings.EntryIsMissingInformation</strong>
			@foreach (var validationMessage in validationMessages) {
				<span data-bind="visible: @validationMessage.Key">
					@validationMessage.Value
				</span>
			}
		</div>
		<!-- /ko -->
		<!-- ko if: validationExpanded -->
		<h4>@HelperRes.HelperStrings.EntryIsMissingInformation</h4>
		<ul class="entry-validation-list">
			@foreach (var validationMessage in validationMessages) {
				<li data-bind="visible: @validationMessage.Key">@validationMessage.Value</li>
			}
		</ul>
		@if (helpSection != null) {
			<span>See the <a href="@(Url.Action("Index", "Help") + "?guidelines+" + helpSection)">guide</a> for more information.</span>
		}
		<!-- /ko -->
	</div>

}

@helper LanguageSelectionDropDown(string valueBinding) {
	@DropdownList(Translate.ContentLanguageSelectionNames.ValuesAndNamesStrings, valueBinding)
}

@* 
	Autocomplete box that allows selection of one item. When an item is selected, "clear" button will be displayed.
*@
@helper LockingAutoComplete(string bindingHandler, string binding, string textBinding = null, string valBinding = null, string extraBindings = null) {
	<input type="text" class="input-large" data-bind="@bindingHandler: @binding, visible: !@(valBinding ?? binding)()@(!string.IsNullOrEmpty(extraBindings) ? ", " + extraBindings : "")" placeholder="@ViewRes.SharedStrings.Search" />
	<div class="input-append" data-bind="visible: @(valBinding ?? binding)()" style="display: none;">
		<input type="text" class="input-large" readonly data-bind="value: @(textBinding ?? binding)" />
		<button type="button" class="btn btn-danger" data-bind="click: function() { @(valBinding ?? binding)(null); }">@ViewRes.SharedStrings.Clear</button>
	</div>
}

@helper BasicEntryLinkLockingAutoComplete(string bindingHandler, string binding, string extraBindings = null) {
	<input type="text" class="input-large" data-bind="@bindingHandler: @(binding).entry, visible: @(binding).isEmpty()@(!string.IsNullOrEmpty(extraBindings) ? ", " + extraBindings : "")" placeholder="@ViewRes.SharedStrings.Search" />
	<div class="input-append" data-bind="visible: !@(binding).isEmpty()" style="display: none;">
		<input type="text" class="input-large" readonly data-bind="value: @(binding).name()" />
		<button type="button" class="btn btn-danger" data-bind="click: @(binding).clear">@ViewRes.SharedStrings.Clear</button>
	</div>
}

@helper SearchDropDown(string visibleBinding, string viewModel, Dictionary<string, string> sortRules) {
	<div data-bind="visible: @visibleBinding, with: @viewModel" class="inline-block search-sort-menu">
		@ViewRes.EntryIndexStrings.SortBy
		<div class="btn-group">
			<button class="btn dropdown-toggle" data-toggle="dropdown">
				<span data-bind="text: sortName"></span>
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				@foreach (var sortRule in sortRules) {
					<li><a data-bind="click: function() { sort('@sortRule.Key'); }" href="#">@sortRule.Value</a></li>
				}
			</ul>
		</div>
	</div>

}

@helper ServerSidePaging() {

	<div class="pagination" data-bind="visible: $data">
		<ul>
			<li data-bind="css: { disabled: isFirstPage }">
				<a data-bind="click: goToFirstPage" href="#">&laquo;&laquo; @VocaDb.Web.Resources.Other.PagedListStrings.First</a>
			</li>
			<li data-bind="css: { disabled: isFirstPage }">
				<a data-bind="click: previousPage" href="#">&laquo; @VocaDb.Web.Resources.Other.PagedListStrings.Previous</a>
			</li>

			<li data-bind="visible: showMoreBegin" class="disabled">
				<a href="#">&hellip;</a>
			</li>

			<!-- ko foreach: pages -->
			<li data-bind="css: { active: $data == $parent.page() }">
				<a data-bind="click: function() { $parent.page($data) }, text: $data" href="#"></a>
			</li>
			<!-- /ko -->

			<li data-bind="visible: showMoreEnd" class="disabled">
				<a href="#">&hellip;</a>
			</li>

			<li data-bind="css: { disabled: isLastPage }">
				<a data-bind="click: nextPage" href="#">@VocaDb.Web.Resources.Other.PagedListStrings.Next &raquo;</a>
			</li>
			<li data-bind="css: { disabled: isLastPage }">
				<a data-bind="click: goToLastPage" href="#">@VocaDb.Web.Resources.Other.PagedListStrings.Last &raquo;&raquo;</a>
			</li>

		</ul>
	</div>

}

@helper TagFilters(bool topGenres = false) {

	<!-- ko foreach: tags -->
	<div class="control-group">
		<div style="display: inline-block;" class="input-append input-prepend">
			<a href="#" class="btn btn-nomargin" data-bind="attr: { href: vdb.utils.EntryUrlMapper.details_tag(id, urlSlug()) }">
				<i class="icon icon-info-sign"></i>
			</a>
			<div class="input-append">
				<input type="text" class="input-large" readonly data-bind="value: name" />
				<button type="button" class="btn btn-danger" data-bind="click: function() { $parent.tags.remove($data); }">Clear</button>
			</div>
		</div>
	</div>
	<!-- /ko -->

	<div data-bind="visible: tags().length">
		<label class="checkbox">
			<input type="checkbox" data-bind="checked: childTags" />
			@ViewRes.Search.IndexStrings.ChildTags
		</label>
	</div>

	<div>

		<input type="text" class="input-large" data-bind="tagAutoComplete: addTag" placeholder="@ViewRes.SharedStrings.Search" />
		
		@if (topGenres) {
		<div class="btn-group">
			<button class="btn dropdown-toggle btn-nomargin" data-toggle="dropdown">
				@ViewRes.Search.IndexStrings.TopGenres
				<span class="caret"></span>
			</button>
			<ul data-bind="foreach: $parent.genreTags" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
				<li>
					<a href="#" data-bind="attr: { href: vdb.utils.EntryUrlMapper.details_tag_contract($data) }, text: name, click: function(selectedTag) { $parent.addTag(selectedTag); }"></a>
				</li>
			</ul>
		</div>
		}

	</div>

}

@helper WebLinksEditViewKnockout(bool showCategory = true) {
	<!-- binding context: WebLinksEditViewModel -->
	<table>
		<thead>
			<tr data-bind="visible: webLinks && webLinks().length">
				<th>
					@HelperRes.HelperStrings.WebLinkUrlTitle
					@Helpers.RequiredField()
				</th>
				<th>@HelperRes.HelperStrings.WebLinkDescriptionTitle</th>
				@if (showCategory) {
					<th>@HelperRes.HelperStrings.WebLinkCategoryTitle</th>
				}
				<th></th>
			</tr>
		</thead>
		<tbody data-bind="foreach: webLinks">
			<tr>
				<td><input type="text" data-bind="value: url" maxlength="512" class="input-xlarge" /></td>
				<td><input type="text" data-bind="value: description" maxlength="512" /></td>
				@if (showCategory) {
					<td>
						<select data-bind="value: category, options: $parent.categories, optionsText: 'name', optionsValue: 'id'" class="input-medium"></select>
					</td>
				}
				<td>
					<a href="#" class="textLink deleteLink" data-bind="click: $parent.remove">@ViewRes.SharedStrings.Delete</a>
				</td>
			</tr>
		</tbody>
	</table>

	<a href="#" class="textLink addLink" data-bind="click: add">@HelperRes.HelperStrings.WebLinkNewRow</a>
}
